import React, { useState } from "react";
import { Form, Button, Picker, Input, Cell } from "@nutui/nutui-react";
import styles from "./index.module.scss";
import { listData } from "./config";
import { ArrowRight } from "@nutui/icons-react";
import { history } from "@tarojs/router";
import Taro from "@tarojs/taro";

function Index() {
  const [form] = Form.useForm();

  const handleClick = () => {
    Taro.navigateTo({
      url: "pages/indexInfo/index",
    });
  };

  return (
    <div className={styles.container}>
      <Form
        form={form}
        labelPosition="left"
        footer={
          <>
            <Button
              nativeType="submit"
              block
              type="primary"
              onClick={handleClick}
            >
              下一步
            </Button>
          </>
        }
      >
        <div className={styles.card}>
          <div>联系人1</div>
          <Form.Item required label="姓名" name="name1">
            <Input type="text" placeholder="请输入姓名" />
          </Form.Item>
          <Form.Item required label="手机号" name="phone1">
            <Input type="text" placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item
            required
            label="关系"
            name="relation1"
            trigger="onConfirm"
            getValueFromEvent={(...args) => args[1]}
            onClick={(event, ref) => {
              ref.open();
            }}
          >
            <Picker options={[listData]}>
              {(value) => {
                return (
                  <Cell
                    style={{
                      padding: 0,
                      "--nutui-cell-divider-border-bottom": "0",
                    }}
                    className="nutui-cell--clickable"
                    title={
                      value.length
                        ? listData.filter((po) => po.value === value[0])[0]
                            ?.text
                        : "请选择关系"
                    }
                    extra={<ArrowRight />}
                    align="center"
                  />
                );
              }}
            </Picker>
          </Form.Item>
        </div>
        <div className={styles.card}>
          <div>联系人2</div>
          <Form.Item required label="姓名" name="name2">
            <Input type="text" placeholder="请输入姓名" />
          </Form.Item>
          <Form.Item required label="手机号" name="phone2">
            <Input type="text" placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item
            required
            label="关系"
            name="relation2"
            trigger="onConfirm"
            getValueFromEvent={(...args) => args[1]}
            onClick={(event, ref) => {
              ref.open();
            }}
          >
            <Picker options={[listData]}>
              {(value) => {
                return (
                  <Cell
                    style={{
                      padding: 0,
                      "--nutui-cell-divider-border-bottom": "0",
                    }}
                    className="nutui-cell--clickable"
                    title={
                      value.length
                        ? listData.filter((po) => po.value === value[0])[0]
                            ?.text
                        : "请选择关系"
                    }
                    extra={<ArrowRight />}
                    align="center"
                  />
                );
              }}
            </Picker>
          </Form.Item>
        </div>
        <div className={styles.card}>
          <div>联系人3</div>
          <Form.Item required label="姓名" name="name3">
            <Input type="text" placeholder="请输入姓名" />
          </Form.Item>
          <Form.Item required label="手机号" name="phone3">
            <Input type="text" placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item
            required
            label="关系"
            name="relation3"
            trigger="onConfirm"
            getValueFromEvent={(...args) => args[1]}
            onClick={(event, ref) => {
              ref.open();
            }}
          >
            <Picker options={[listData]}>
              {(value) => {
                return (
                  <Cell
                    style={{
                      padding: 0,
                      "--nutui-cell-divider-border-bottom": "0",
                    }}
                    className="nutui-cell--clickable"
                    title={
                      value.length
                        ? listData.filter((po) => po.value === value[0])[0]
                            ?.text
                        : "请选择关系"
                    }
                    extra={<ArrowRight />}
                    align="center"
                  />
                );
              }}
            </Picker>
          </Form.Item>
        </div>
      </Form>
    </div>
  );
}

export default Index;
